<template>
  <div>
    <!-- <el-table
      :data="this.hao"
      border
      style="width: 100%">
      <el-table-column prop="Images" label="图片" width="60">
                    <template #default="{ row }">
                        <el-avatar :src="imgbase + row.Images"></el-avatar>
                    </template>
                </el-table-column>
      <el-table-column
        prop="Name"
        label="商品名称"
        width="100">
      </el-table-column>
      <el-table-column
        prop="Shu"
        label="商品数量"
        width="100">
      </el-table-column>
      
      <el-table-column
        prop="Price"
        label="商品价格" width="100">
        <template #default="{ row }">
                     
                     {{ row.Price|currency}}
                 </template>
      </el-table-column>
      
    </el-table> -->

    <template>
  <el-table
    :data="this.hao"
    style="width: 100%">
    <el-table-column type="expand">
      <template slot-scope="props">
        <el-form label-position="left" inline class="demo-table-expand">
          <el-form-item label="详情ID:">
            <span>{{ props.row.Pxqid }}</span>
          </el-form-item>
          <el-form-item label="是否有配料:">
            <span>{{ props.row.Sfpl==true?"有":"无" }}</span>
          </el-form-item>
          <el-form-item v-if="props.row.Sfpl==true" label="配料:">
            <span>{{ props.row.Pl }}</span>
          </el-form-item>
         
          
         
        </el-form>
      </template>
    </el-table-column>
    
    <el-table-column prop="Images" label="图片" width="60">
                    <template #default="{ row }">
                        <el-avatar :src="imgbase + row.Images"></el-avatar>
                    </template>
                </el-table-column>
      <el-table-column
   
      label="商品名称"
      prop="Name" width="100">
    </el-table-column>
   
    <el-table-column
        prop="Shu"
        label="商品数量"
        width="100">
      </el-table-column>
      
      <el-table-column
        prop="Price"
        label="商品价格" width="100">
        <template #default="{ row }">
                     
                     {{ row.Price|currency}}
                 </template>
      </el-table-column>
  </el-table>
</template>
    <span>商品件数:{{this.hao1}}</span>
    <span style="margin-left: 30px;">商品价格:{{this.hao2|zz}}</span>
    
    </div>
  </template>
  <style>
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>
  <script>
  import basepath from '../../plugins/base.js'
  import Vue from 'vue';
  Vue.filter('currency', function(value) {
  if (typeof value !== 'number') {
    return value;
  }
  // 这里以人民币为例，你可以根据需要修改货币符号和格式
  return  value.toFixed(2)+'￥';
});
    export default {
      data() {
        return {
          shuju:[],
          tt:[],
          imgbase:''
        }
      },
      props: {
       xian: Boolean,
       shuju1:Object
    }
      ,created(){
        this.cha();
        this.tt=this.shuju1
        this.imgbase = basepath.imgUrl;
        
      }
      ,
      methods:{
        cha(){
         this.axios({
      method:'get',
      url:'Pderxq',
      params:{},
     }).then(res=>{
      this.shuju=res.data
       console.log(res.data)
       console.log(this.shuju1)
     }).catch(error=>{
         console.log('error: ', error);
     })
       }
      },computed:{
        
         hao(){
            return this.shuju.filter(n=>n.Pbh==this.tt.Pbh)
        },
        hao1(){
            return this.hao.reduce((sum,product)=>sum+product.Shu,0)
        },
        hao2(){
        return this.hao.reduce((sum,product)=>sum+product.Price*product.Shu,0);
      }
      },watch: {
        xian(newvalue,oldvalue){
            //修改数据的值
            this.tt=this.shuju1
        }
    },filters:{
      zz(value){
        return value+'.00￥'
      }
    }
    }
  </script>